<template>
  <!-- 顶部区域左侧下方预计可申报资助图表 -->
  <div ref="chartContainer" style="width: 600px; height: 200px;"></div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';

import {watch} from 'vue';

watch(() => props.subsidyData, (newVal) => {
  if (chartContainer.value) {
    const myChart = echarts.getInstanceByDom(chartContainer.value);
    myChart?.setOption({
      legend: {
        formatter: (name: string) => {
          return `${name}  ${newVal[name === '5星' ? 'fiveStar' : name === '4星' ? 'fourStar' : 'threeStar']} 万`;
        }
      },
      series: [{
        data: [
          {value: newVal.fiveStar, name: '5星'},
          {value: newVal.fourStar, name: '4星'},
          {value: newVal.threeStar, name: '3星'}
        ]
      }]
    });
  }
}, {deep: true});
// 创建图表容器的引用
const chartContainer = ref<HTMLDivElement | null>(null);

const props = defineProps({
  subsidyData: {
    type: Object,
    default: () => ({
      fiveStar: 0,
      fourStar: 0,
      threeStar: 0
    })
  }
})


onMounted(() => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);

    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}', // 只显示名称，去掉数值和百分比
      },
      legend: {
        orient: 'vertical', // 垂直排列
        left: 'left', // 将图例放置在左侧
        top: 'center', // 图例垂直居中
        data: ['5星', '4星', '3星'], // 图例项，修改为“3星”
        selectedMode: 'multiple', // 允许多选（可以切换不同图例）
        formatter: (name: string) => {
          const data = {
            '5星': props.subsidyData.fiveStar,
            '4星': props.subsidyData.fourStar,
            '3星': props.subsidyData.threeStar
          };
          return `${name}  ${data[name]} 万`; // 在图例后面加上数值
        },
      },
      series: [
        {
          name: '星级',
          type: 'pie',
          radius: ['50%', '70%'], // 定义环形的内外半径
          avoidLabelOverlap: false,
          label: {
            show: false, // 不显示标签的数值
            position: 'outside', // 标签显示在外侧
          },
          labelLine: {
            show: true, // 显示连接线
          },
          data: [
            {value: props.subsidyData.fiveStar, name: '5星'},
            {value: props.subsidyData.fourStar, name: '4星'},
            {value: props.subsidyData.threeStar, name: '3星'}
          ],
        },
      ],
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '预计可申报资助', // 中间显示的文本
              textAlign: 'center',
              font: '13px Arial',
              fill: '#333', // 设置字体颜色
            },
          },
          {
            type: 'text',
            left: 'left', // 将文本定位到左侧
            top: '20%', // 距离顶部10%的位置
            style: {
              text: '预计可申报资助', // 在左侧图例上方显示
              textAlign: 'center',
              font: '13px Arial',
              fill: '#333',
            },
          },
        ],
      },
    };

    // 使用指定的配置项和数据显示图表
    myChart.setOption(option);
  }
});
</script>

<style scoped>
/* 可选：为图表容器添加一些样式 */
#chartContainer {
  position: relative;
}
</style>
